<template>
    <div>
        <div class="banner h-[450px] bg-[#f3faf9] w-full text-center">
            <div
                class="banner-bg pt-[100px] w-[1920px] h-full mx-auto text-center"
            >
                <div
                    class="animate-trigger text-[42px] text-[#262626] font-400"
                >
                    每一份营养，都是给身体的一封情书
                </div>
            </div>
        </div>
        <div class="w-[1200px] mx-auto py-[60px]">
            <div class="flex justify-between">
                <!-- 左侧用户信息 -->
                <div class="w-[600px] h-[486px]">
                    <div class="relative">
                        <swiper
                            :modules="[Navigation]"
                            :slides-per-view="1"
                            class="h-[500px]"
                            @swiper="onSwiper"
                            @slideChange="handleSlideChange"
                        >
                            <swiper-slide
                                v-for="(user, index) in userCases"
                                :key="index"
                            >
                                <div
                                    class="h-full pr-[80px] bg-white rounded-[16px]"
                                >
                                    <div
                                        class="flex items-center gap-[16px] mb-[20px]"
                                    >
                                        <div
                                            class="w-[80px] h-[80px] rounded-full overflow-hidden bg-[#f5f5f5]"
                                        >
                                            <img
                                                v-if="user.avatar"
                                                :src="user.avatar"
                                                :alt="user.name"
                                                class="w-full h-full object-cover"
                                            />
                                        </div>
                                        <div>
                                            <div class="text-[20px] font-500">
                                                {{ user.name }} {{ user.age }}岁
                                            </div>
                                            <div
                                                class="text-[14px] text-[#666] mt-[4px]"
                                            >
                                                {{ user.tags.join('  |  ') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex gap-[8px] mb-[16px]">
                                        <a-tag
                                            v-for="tag in user.conditions"
                                            :key="tag"
                                            color="red"
                                            >{{ tag }}</a-tag
                                        >
                                    </div>
                                    <a-divider
                                        style="background-color: #3aa01a"
                                    />
                                    <div
                                        class="text-[14px] text-[#666]"
                                        style="line-height: 1.8"
                                    >
                                        {{ user.description }}
                                    </div>

                                    <a-divider
                                        style="background-color: #3aa01a"
                                    />
                                </div>
                            </swiper-slide>
                        </swiper>
                        <div
                            class="absolute bottom-0 left-0 flex gap-[12px] translate-y-[-50%] z-10"
                        >
                            <a-button
                                type="primary"
                                shape="circle"
                                style="
                                    height: 58px;
                                    width: 58px;
                                    font-size: 20px;
                                "
                                @click="prevSlide"
                                :disabled="isFirstSlide"
                                :icon="h(LeftOutlined)"
                            />

                            <a-button
                                type="primary"
                                shape="circle"
                                style="
                                    height: 58px;
                                    width: 58px;
                                    font-size: 20px;
                                "
                                @click="nextSlide"
                                :disabled="isLastSlide"
                                :icon="h(RightOutlined)"
                            />
                        </div>
                    </div>
                </div>

                <!-- 右侧调理方案 -->
                <div
                    class="w-[600px] h-[486px] bg-[#F8F9FA] rounded-[16px] p-[30px]"
                >
                    <div class="flex justify-between items-center mb-[24px]">
                        <div class="text-[24px] font-500">
                            {{ currentCase.planName }}
                        </div>
                        <div class="flex gap-[8px]">
                            <a-tag color="success">助降糖</a-tag>
                            <a-tag color="success">支持免疫</a-tag>
                        </div>
                    </div>
                    <div class="h-[380px] overflow-y-auto pr-[20px]">
                        <div
                            v-for="(item, index) in currentCase.plan"
                            :key="index"
                            class="flex items-center gap-[16px] p-[16px] border-b border-[#f0f0f0] last:border-none"
                        >
                            <div
                                class="w-[60px] h-[60px] rounded-[8px] bg-[#f5f5f5] shrink-0"
                            >
                                <img
                                    v-if="item.image"
                                    :src="item.image"
                                    :alt="item.name"
                                    class="w-full h-full object-cover"
                                />
                            </div>
                            <div>
                                <div class="text-[16px] font-500">
                                    {{ item.name }}
                                </div>
                                <div class="text-[14px] text-[#666] mt-[4px]">
                                    {{ item.description }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import type { Swiper as SwiperType } from 'swiper'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'

interface PlanItem {
    name: string
    description: string
    image?: string
}

interface UserCase {
    name: string
    age: number
    avatar?: string
    tags: string[]
    conditions: string[]
    description: string
    planName: string
    plan: PlanItem[]
}

const userCases: UserCase[] = [
    {
        name: '王先生',
        age: 37,
        tags: ['抗衰', '免疫'],
        conditions: ['血糖偏高', '血压偏高'],
        description:
            '频繁的出差、加班、应酬导致身体处于健康与疾病的临界点，血糖、血压、血脂等健康指标纷纷亮起红灯，如果按照医嘱吃药、严格作息，就无法兼顾事业，于是我开始寻求现代临床医学以外的方式来调理身体。在医学专家、营养专家和运动专家的悉心指导下，通过自然疗法服用膳食营养补充剂、均衡饮食、科学运动，实现了从亚健康到健康的逆转',
        planName: 'AS-0001综合调理包',
        plan: [
            {
                name: '内桂提取物',
                description: '改善循环系统营养，调节血糖'
            },
            {
                name: '苦瓜多肽',
                description: '增加胰岛素敏感性，调节血糖'
            },
            {
                name: '甘蔗多酚',
                description: '抗氧化，防止葡萄糖毒效'
            },
            {
                name: '内桂提取物',
                description: '改善循环系统营养，调节血糖'
            },
            {
                name: '银杏叶提取物',
                description: '改善微循环，增强代谢功能'
            },
            {
                name: '绿茶提取物',
                description: '抗氧化，提升新陈代谢'
            },
            {
                name: '姜黄素',
                description: '抗炎，改善胰岛素敏感性'
            },
            {
                name: '芦荟提取物',
                description: '调节血糖，改善肠道健康'
            }
        ]
    },
    {
        name: '王先生',
        age: 37,
        tags: ['抗衰', '免疫'],
        conditions: ['血糖偏高', '血压偏高'],
        description:
            '频繁的出差、加班、应酬导致身体处于健康与疾病的临界点，血糖、血压、血脂等健康指标纷纷亮起红灯...',
        planName: 'AS-0001综合调理包',
        plan: [
            {
                name: '内桂提取物',
                description: '改善循环系统营养，调节血糖'
            },
            {
                name: '苦瓜多肽',
                description: '增加胰岛素敏感性，调节血糖'
            },
            {
                name: '甘蔗多酚',
                description: '抗氧化，防止葡萄糖毒效'
            },
            {
                name: '内桂提取物',
                description: '改善循环系统营养，调节血糖'
            }
        ]
    }
]

const swiperRef = ref<SwiperType>()
const currentCase = ref(userCases[0])
const isFirstSlide = ref(true)
const isLastSlide = ref(false)

const onSwiper = (swiper: SwiperType) => {
    swiperRef.value = swiper
    updateSlideState(swiper)
}

const handleSlideChange = () => {
    if (swiperRef.value) {
        currentCase.value = userCases[swiperRef.value.activeIndex]
        updateSlideState(swiperRef.value)
    }
}

const updateSlideState = (swiper: SwiperType) => {
    isFirstSlide.value = swiper.isBeginning
    isLastSlide.value = swiper.isEnd
}

const prevSlide = () => {
    swiperRef.value?.slidePrev()
}

const nextSlide = () => {
    swiperRef.value?.slideNext()
}
</script>

<style lang="less" scoped>
.banner {
    &-bg {
        background: url('../../assets/images/achieve/banner.png') no-repeat;
        background-size: 1920px 450px;
    }
}

/* 自定义滚动条样式 */
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #e0e0e0;
        border-radius: 2px;
    }
}

:deep(.swiper) {
    .swiper-slide {
        transition: opacity 0.3s ease;
    }
}

:deep(.ant-btn-primary[disabled]) {
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    color: rgba(0, 0, 0, 0.25) !important;
    cursor: not-allowed;
}
</style>
